import useForceUpdate from "../../hooks/useForceUpdate";
import useWindowScrollerWatcher from "../../hooks/useWindowScrollerWatcher";

export default function ForceUpdateTest() {
  const forceUpdate = useForceUpdate(); // 用了自定义hooks以后 别人读你的代码没有任何压力
  useWindowScrollerWatcher(() => { // 你在监听浏览器滚动事件
    console.log("ForceUpdateTest这个组件的浏览器滚动时间触发了")
  })
  // 抽离逻辑 大型项目都用React vue2 想一下抽离公用能力的最小但愿是什么 是组件
  // vue3 也发现了 这个react的hooks 函数时变成好 vue3直接改了

  // 一般的大型项目 代码量非常多 逻辑也非常多 可复用的逻辑也很多

  // 我们才学了两个hook useState useEffect 在vue3没有出来之前基本上在大型项目上是无能为力的

  // 公用的函数 ---》 公用的函数是不具备响应式的
  return (
    // <div style={{height: "2000px"}}>
    <div>
      <button onClick={forceUpdate}>force update</button>
    </div>
  )
}


// export default function ForceUpdateTest() {
//   // const [_, setForceObj] = useState({});
//   // const forceUpdate = () => {
//   //   setForceObj({})
//   // }
//   // 假设我的复制逻辑有50行
//   // 写把八九行监听逻辑
// useEffect(() => {
//   const scrollHandler = () => {
//     console.log("浏览器滚动了")
//   }
//   document.addEventListener("scroll", scrollHandler)
//   return () => {
//     document.removeEventListener("scroll", scrollHandler)
//   }
// }, [])
//   return (
//     <button onClick={forceUpdate}>force update</button>
//   )
// }